<template>
  <a-modal :visible="show" title="申请产品" centered destroyOnClose okText="提交申请" width="620px" @ok="handleOk"
           @cancel="handleCancel"
           :confirmLoading="loading"
           :bodyStyle="{'height':'60vh','overflow-y':'auto','padding':'10px 20px'}">
    <a-form class="custom-form" :form="applyForm" :label-col="{span:5}" :wrapper-col="{span:19}">
      <div class="apply-title">申请说明</div>
      <a-form-item label="数据用途说明">
        <a-textarea :maxLength="1000" :rows="3" placeholder="请详细描述数据用途说明，包括应用行业、场景及数据更新时效等要求"
                    v-decorator="['purpose',{rules:[{required:true,message:'请输入数据用途说明'}]}]"/>
      </a-form-item>
      <a-form-item label="预算总金额">
        <a-input-number placeholder="请输入预算总金额，若“无预算”或未知，则填写“0”元" style="width: calc(100% - 20px)"
                        :min="0" :precision="2" :max="99999999"
                        v-decorator="['budgetAmount',{rules:[{required:true,message:'请输入预算总金额'}]}]"/>
        <span style="float: right">元</span>
      </a-form-item>
      <a-form-item label="期望付费方式">
        <a-select placeholder="请选择期望付费方式"
                  v-decorator="['expectPayModel',{rules:[{required:true,message:'请选择期望付费方式'}]}]">
          <a-select-option v-for="item in dict['PAY_MODEL']" :value="item.code" :key="item.code">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="所属行业">
        <a-select placeholder="请选择所属行业"
                  v-decorator="['industry',{rules:[{required:true,message:'请选择所属行业'}]}]">
          <a-select-option v-for="item in dict['INDUSTRY']" :value="item.code" :key="item.code">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <div class="apply-title">联系人信息</div>
      <a-form-item label="联系人姓名">
        <a-input :maxLength="50" placeholder="请输入联系人姓名"
                 v-decorator="['contactPerson',{initialValue:userInfo.userName,rules:[{required:true,message:'请输入联系人姓名'}]}]"/>
      </a-form-item>
      <a-form-item label="手机号码">
        <a-input :maxLength="50" placeholder="请输入手机号码"
                 v-decorator="['mobile',{initialValue:userInfo.phone,rules:[{required:true,message:'请输入手机号码'},{validator:validators.validatePhone}]}]"/>
      </a-form-item>
      <a-form-item label="电子邮箱">
        <a-input :maxLength="50" placeholder="请输入电子邮箱"
                 v-decorator="['email',{initialValue:userInfo.email,rules:[{validator:validators.validateEmail}]}]"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
export default {
  name: 'Apply',
  props: {
    show: false,
    loading: false,
    userInfo: {},
    dict: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      applyForm: this.$form.createForm(this, {name: 'applyForm'}),
    }
  },
  methods: {
    handleOk () {
      this.applyForm.validateFields((error, values) => {
        if (!error) {
          this.$emit('ok', values)
        }
      })
    },
    handleCancel () {
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped lang="scss">
.custom-form {
  > > > .ant-form-item {
    margin-bottom: 5px;
  }
}

.apply-title {
  line-height: 20px;
  margin: 5px 0 10px 0;
  padding-left: 4px;
  position: relative;
  color: #333;

  &:before {
    content: ' ';
    position: absolute;
    top: 2px;
    left: -4px;
    width: 3px;
    border-radius: 3px;
    height: 16px;
    background-color: #0078FE;
  }
}
</style>
